@import "libary.less";

*{
	margin: 0;
	padding: 0;
	outline: 0 none;
}

body{
	background: url(../images/bg_body.jpg);
	font-size: 12px;
	font-family: Arial;
	color: @color_text_page;
}

img{
	border: none;
}

#all{
	margin: 20px auto 0;
	width: @width;
	#main{
		.float;
		.rounded_corners(12px);
		background-color: #ffffff;
		
		.detail_buy{
			.float;
			margin-top: 15px;
			
			a{
				.float;
				text-decoration: none;
				background-color: @color_menu;
				padding: 7px 10px;
				text-align: center;
				line-height: 16px;
				display: inline-block;
				color: #fff;
				font-weight: bold;
				.rounded_corners(5px);
			}
			
			a:hover{
				background-color: #F77291;
			}
		}
		
		.main_in{
			.float;
			margin: 5px 5px 5px 5px;
			width: @width_in;
			.rounded_corners(12px);
			.border_color(5px,@color_vien);
			
			#barner{
				.float;
				width: @width_in;
				height: 100px;
						
				.logo{
					.float;
					margin: 18px 0 0 20px;
					width: 170px;
				}
				
				.search{
					.float;
					width: 317px;
					height: 42px;
					margin: 32px 0 0 130px;
					background: url(../images/search.png) no-repeat;
					
					input.key_search{
						background: none;
						border: none;
						width: 255px;
						height: 26px;
						margin: 8px 0 0 13px;
						color: #666666;
					}
					
					input.sub{
						background: none;
						border: none;
						width: 35px;
						height: 28px;
						cursor: pointer;
					}
				}
				
				.login_logout{
					.float;
					width: 283px;
					margin-top: 57px;
					
					p{
						float: right;
						display: inline;
						font-size: 14px;
						font-weight: bold;
						margin-right: 7px;
											
						a{
							color: #494848;
							text-decoration: none;
						}
						
						a:hover{
							color: @color_text_hover;
						}
					}
				}
			}// end barner
			
			#menu{
				.float;
				width: @width_in;
				height: 40px;
				background-color: @color_menu;
				position: relative;
				
				.navigation{
					.float;
					width: 695px;
					
					ul{
						float: left;
						list-style: none;
						margin: 12px 0 0 5px;
						
						li{
							float: left;
							position: relative;
							
							ul{
								position: absolute;
								top: 16px;
								left: -5px;
								background: #ffffff;
								display: none;
																
								li{
									width: 250px;
									border-bottom: 1px solid @color_menu;
									
									a{
										display: block;
										color: @color_menu !important;
										padding: 12px 20px 12px !important;
									}
									
									a:hover{
										background-color: @color_menu;
										color: #ffffff !important;
										border-top: 2px solid #ffffff !important;
									}
								}
							}
							
							span{
								.float;
								font-size: 14px;
								color: #ffffff;
								margin-top: -1px;
								font-weight: bold;
							}
							
							a{
								font-size: 14px;
								color: #ffffff;
								font-weight: bold;
								padding: 16px 20px 12px;
								text-transform: uppercase;
								text-decoration: none;
							}
							
							a:hover{
								background-color: #ffffff;
								color: @color_menu_hover;
								border-top: 2px solid @color_menu;
							}
							
							.active{
								background-color: #ffffff;
								color: @color_menu_hover;
								border-top: 2px solid @color_menu;
							}
							
							&:hover ul{
								display: block;
							}
						}
					}
				}// end navigation
				
				.menu_phone{
					background-color: @color_menu_phone;
					position: absolute;
					width: 205px;
					height: 50px;
					top: -10px;
					right: 7px;
					-webkit-border-radius: 5px 5px 0 0;
				    -moz-border-radius: 5px 5px 0 0;
				    -ms-border-radius: 5px 5px 0 0;
				    -o-border-radius: 5px 5px 0 0;
				    border-radius: 5px 5px 0 0;
					
					img{
						.float;
						margin: 6px 0 0 6px;
					}
					
					p{
						.float;
						font-size: 13px;
						font-weight: bold;
						width: 150px;
						margin: 5px 0 0 10px;
						color: #ffffff;
					}
					
					span{
						.float;
						color: #ffffff;
						font-size: 20px;
						font-weight: bold;
						margin: 1px 0 0 10px;
					}
				}
			}// end menu
			
			dir{
				position: absolute;
				top: 14px;
				right: 9px;
				width: 150px;
				color: #008dbe;
				font-size: 1.7em;
				font-weight: bold;
			}
			
			#content{
				.float;
				width: @width_in;
				margin-top: 10px;
				
				.content_left{
					.float;
					width: @width_content_left;
					margin-right: 13px;
					
					.slide{
						.float;
						width: @width_content_left;
						height: 285px;
						margin-left: 5px;
					}
					
					.all_category{
						.float;
						width: @width_content_left;						
						
						.one_category{
							.float;
							width: @width_content_left;
							margin-top: 15px;
							
							.one_category_line{
								.float;
								border-top: 5px solid @color_menu;
								width: @width_content_left;
								margin-left: 5px;
							}
							
							.one_category_title{
								.float;
								width: width_content_left;
								margin-top: 8px;
								width: @width_content_left;
								margin-left: 5px;
								
								h3{
									.float;
									color: @color_text_page;
									text-transform: uppercase;
								}
								
								p{
									float: right;
									display: inline;
									
									a{
										color: @color_text_page;
										text-decoration: none;
									}
									
									a:hover{
										color: @color_text_hover;
										text-decoration: underline;
									}
								}
							}
							
							.one_category_allProducts{
								.float;
								width: @width_content_left;
								margin-top: 15px;
								
								.one_category_OneProducts{
									.float;
									width: 160px;
									height: 238px;
									.rounded_corners(5px);
									.border_color(1px,@color_vien);
									margin: 0 0 20px 10px;
									
									.img_produt{
										.float;
										margin: 5px 0 0 5px;
										height: 187px;
									}
									
									.img_cart{
										.float;
										width: 46px;
										
										img{
											.rounded_corners_size(0,0,0,5px);
										}
									}
									
									.one_category_OneProducts_text{
										.float;
										width: 110px;
										margin-left: 4px;
										
										p{
											.float;
											width: 110px;										
											font-size: 12px;
											font-weight: bold;
											margin-top: 8px;
											
											a{
												color: @color_text_page;
												text-decoration: none;
											}
											
											a:hover{
												color: @color_text_hover;
											}
										}
										
										h3{
											.float;
											color: @color_price;
											margin-top: 3px;
										}
									}
									
									&:hover{
										.border_color(1px,@color_text_hover);
									}
								}
							}
							
							.pagination{
								float: right;
								display: inline;
								width: @width_content_left;
							}
							
							.content_contact{
								.float;
								width: @width_content_left;
								margin: 15px 0 0 5px;
								
								h4{
									.float;
									width: (@width_content_left)-30px;
									color: @color_text_hover;
								}
								
								p{
									.float;
									width: @width_content_left;
									color: @color_text_page;
									margin-top: 5px;
								}
								
								.map{
									.float;
									width: @width_content_left;
									margin-top: 20px;
									
									iframe{
										.float;
										border: 1px solid #999999;
										width: 425px;
									}
									
									.address{
										.float;
										margin-left: 10px;
										width: 250px;
										
										h4{
											width: 250px !important;
											
											a{
												color: @color_text_hover;
												text-decoration: none;
											}
										}
										
										span{
											.float;
											width: 250px;
											margin-top: 5px;
											color: @color_text_page;
											
											a{
												color: @color_text_hover;
											}
										}
									}
								}		

								#event{
									.float;
									width: @width_content_left;
									
									.event_title{
										.float;
										width: @width_content_left;
										cursor: pointer;
										margin-top: 20px;
										
										img{
											.float;
											vertical-align: middle;
										}
										
										p{
											.float;
											width: (@width_content_left)-30px !important;	
											margin: 0 0 0 10px !important;
											font-weight: bold;
											color: #f77291;
										}
									}
									
									.event_content{
										.float;
										width: @width_content_left;
										margin-top: 10px;
										color: @color_text_page;
										
										img{
											.float;
											width: 120px;
											margin-right: 20px;
										}
										
										article{
											.float;
											width: 545px;
											text-align: justify;
											
											p{
												.float;
												width: 545px;
											}
											
											div{
												.float;
												width: 545px;
												display: none;
												margin-top: 10px;
											}
											
											span{
												float: right;
												display: inline;
												font-size: 11px;
												cursor: pointer;
												
												a{
													color: @color_price;
												}
											}
										
										}
									}
								}
								
								.login{
									.float;
									width: @width_content_left;
									margin-top: 10px;
									
									.login_left{
										.float;
										.border_color(1px,#ccc7c7);
										width: 335px;
										padding-bottom: 15px;
										
										h4{
											color: #494848 !important;
											width: 295px !important;
											margin: 15px 0 0 20px;
											text-transform: uppercase;
											border-bottom: 1px solid #ccc7c7;
											height: 20px;
										}
										
										p{
											.float;
											width: 295px;
											margin: 20px 0 12px 20px;	
										}
										
										.width_form{
											.float;
											width: 295px;
											margin: 10px 0 0 20px !important;
											
											label{
												.float;
												width: 85px;
												height: 25px;
												line-height: 25px;
												color: @color_text_page;
											}
											
											input.input_text{
												.float;
												background-color: #f1f1f1;
												border: 1px solid #f1f1f1;
												height: 25px;
												width: 208px;
												
												&:focus{
													.border_color(1px,#cccccc);
													background-color: #ffffff;
												}
											}
											
											em{
												.float;
												width: 85px;
												font-size: 11px;
												margin-top: 7px;
												
												a{
													color: #000000;
													text-decoration: none;
												}
												
												a:hover{
													text-decoration: underline;
												}
											}
											
											input.sub{
												.float;
												background-color: @color_menu;
												border: none;
												color: #ffffff;
												cursor: pointer;
												padding: 5px;
												.rounded_corners(5px);
												border: 1px solid #ffffff;
												
												&:hover{
													background-color: #ffffff;
													color: @color_text_hover;
													border: 1px solid @color_menu;
												}
											}
										}
									}
									
									.login_right{
										.float;
										.border_color(1px,#ccc7c7);
										width: 335px;
										margin-left: 15px;
										padding-bottom: 15px;
										
										h4{
											color: #494848 !important;
											width: 295px !important;
											margin: 15px 0 10px 20px;
											text-transform: uppercase;
											border-bottom: 1px solid #ccc7c7;
											height: 20px;
										}
										
										.width_form{
											.float;
											width: 295px;
											margin: 10px 0 0 20px !important;
											
											label{
												.float;
												width: 85px;
												height: 25px;
												line-height: 25px;
												color: @color_text_page;
											}
											
											input.input_text{
												.float;
												background-color: #f1f1f1;
												border: 1px solid #f1f1f1;
												height: 25px;
												width: 208px;
												
												&:focus{
													background-color: #ffffff;
													.border_color(1px,#cccccc);
												}
											}
											
											em{
												.float;
												width: 85px;
												font-size: 11px;
												margin-top: 7px;
												
												a{
													color: #000000;
													text-decoration: none;
												}
												
												a:hover{
													text-decoration: underline;
												}
											}
											
											input.sub{
												.float;
												background-color: @color_menu;
												border: none;
												color: #ffffff;
												cursor: pointer;
												padding: 5px;
												.rounded_corners(5px);
												border: 1px solid #ffffff;
												
												&:hover{
													background-color: #ffffff;
													color: @color_text_hover;
													border: 1px solid @color_menu;
												}
											}
										}
									}
								}// end login
								
								.register{
									.float;
									width: @width_content_left;
									margin-top: 10px;
									color: @color_text_page;
									
									h4{
										.float;
										color: @color_text_page;
										height: 20px;
										border-bottom: 1px solid #ccc7c7;
										width: @width_content_left;
										margin-bottom: 20px;
									}
									
									.width_register{
										.float;
										width: 500px;
										margin:0 0 10px 50px;
										
										label{
											.float;
											text-align: right;
											width: 150px;
											margin: 6px 10px 0 0;
										}
										
										input{
											.float;
											width: 200px;
											height: 25px;
											background-color: #f1f1f1;
											border: 1px solid #f1f1f1;	

											&:focus{
												.border_color(1px,#cccccc);
												background-color: #ffffff;
											}
										}
										
										input.radi{
											.float;
											width: 25px !important;
											vertical-align: middle;
										}
										
										p{
											.float;
											width: 50px;
										}
										
										textarea{
											.float;
											background-color: #f1f1f1;
											border: 1px solid #f1f1f1;
											
											&:focus{
												.border_color(1px,#cccccc);
												background-color: #ffffff;
											}
										}
										
										input.register_sub{
											.float;
											background-color: @color_menu;
											border: none;
											color: #ffffff;
											cursor: pointer;
											padding: 5px;
											.rounded_corners(5px);
											border: 1px solid #ffffff;
											height: auto;
											width: auto;
											
											&:hover{
												background-color: #ffffff;
												color: @color_text_hover;
												border: 1px solid @color_menu;
											}
										}
									}
								}// end register
							}
							
							.detail{
								.float;
								width: @width_content_left;
								margin: 15px 0 0 5px;
								
								.detail_img{
									.float;
									padding: 5px;
									width: 200px;
									height:230px;
									border: 1px solid @color_vien;
									.rounded_corners(5px);
								}
								
								.detail_content{
									.float;
									width: 450px;
									margin-left: 20px;
									color: @color_text_page;
									
									h4{
										.float;
										width: 100%;
										text-transform: uppercase;
										font-size: 16px;										
									}
									
									p{
										.float;
										width: 100%;
										margin-top: 10px;
										line-height: 16px;
										
										span{
											color: #f77291;
											font-size: 14px;
											font-weight: bold;
										}
										
										input{
											border: 1px solid #d2cfcb;
											width: 20px;
											padding: 5px;
											text-align: center;
											margin: 0 5px;
										}									
									}
									
									.detail_buy_cart{
										.float;
										margin: 15px 0 0 10px;
										
										a{
											.float;
											text-decoration: none;
											background: #EBEBEB;
											padding: 5px 10px;
											text-align: center;
											line-height: 16px;
											display: inline-block;
											color: #fff;
											font-weight: bold;
											.rounded_corners(5px);
											border: 1px solid #C0C8D4;
											color: #424E66;
											
											img{
												position: relative;
												top: 2px;
											}
										}
										
										a:hover{
											color: #F77291;
										}
									}
								}
							}
						}
						
						.profile{
							.float;
							width: 100%;
							margin: 15px 0 0 5px;
							
							h3{
								.float;
								width: 100%;
							}
							
							p{
								color: #008DBE;
								.float;
								width: 100%;
								text-align: center;
								margin: 2px 0;
								visibility: hidden;
							}
							
							article{
								.float;
								width: 100%;
								margin-top: 10px;
								
								input{
									padding: 3px;
									border: 1px solid #bcbbba;
								}
								
								a:hover{
									text-decoration: none;
								}
							}
							
							.register{
								.float;
								.rounded_corners(5px);
								border: 1px solid @color_menu;
								padding: 10px;
								width: 312px;
								margin-right: 20px;
								
								label{
									.float;
									width: 120px;
									margin-top: 3px;
								}
								
								input{
									width: 180px;
								}
							}
							
							.login{
								.float;
								.rounded_corners(5px);
								border: 1px solid @color_menu;
								padding: 10px;
								width: 312px;
								
								label{
									.float;
									width: 70px;
									margin-top: 3px;
								}
								
								input{
									width: 230px;
								}
							}
						}
					}
				}// end content_left
				
				.content_right{
					.float;
					width: @width_content_right;
					margin-left: 5px;
					
					.new_produts{
						.float;
						background-color: #f77291;
						width: @width_content_right;
						height: 285px;
						
						p{
							.float;
							color: #ffffff;
							font-size: 20px;
							font-weight: bold;
							text-transform: uppercase;
							margin: 5px 0 0 25px;
						}
						
						.new_produts_img{
							.float;
							margin: 5px 0 0 22px;
						}
					}
					
					.category{
						.float;
						width: (@width_content_right)-2px;
						.border_color(1px,@color_menu);
						.rounded_corners(5px);
						margin-top: 15px;
						
						.category_title{
							.float;
							width: (@width_content_right)-1px;
							height: 30px;
							-webkit-border-radius: 5px 5px 0 0;
							-moz-border-radius: 5px 5px 0 0;
							-ms-border-radius: 5px 5px 0 0;
							-o-border-radius: 5px 5px 0 0;
							border-radius: 5px 5px 0 0;
							background-color: @color_menu;	
							margin-top: -1px;
							
							img{
								.float;
								width: 20px;
								height: 35px;
								margin: -10px 0 0 5px;
							}
							
							p{
								.float;
								font-size: 14px;
								font-weight: bold;
								text-transform: uppercase;
								color: #ffffff;
								margin: 7px 0 0 5px;
							}
						}
						
						.category_content{
							.float;
							width: (@width_content_right)-1px;
							
							ul{
								list-style: none;
								
								li{
									border-bottom: 1px solid @color_menu;
									
									a{
										color: @color_text_page;
										text-decoration: none;
										padding: 7px 20px 7px 20px;
										display: block;
									}
									
									a:hover{
										color: #ee4570;
									}
								}
							}
							
							.chat{
								.float;
								margin: 0 0 0 30px;
							}		

							.cart{
								.float;
								padding: 10px 5px;
								color: @color_text_page;
								
								p{
									.float;
									line-height: 20px;
									width: 100%; 
									
									span{
										.float;
										width: 22px;
										margin-right: 8px;
									}
									
									a{
										.float;
										color: @color_text_page;
										width: 85px;
									}
									
									a:hover{
										text-decoration: none;
									}
									
									img{
										float: right;
										display: inline;
										margin: 5px 0 0 3px;
									}
									
									b{
										.float;
										font-size: 11px;
										margin: 1px 0 0 0;
									}
								}
								
								h4{
									.float;
									width: 100%;
									margin-top: 15px;
									
									span{
										float: right !important;
										display: inline;
										margin-right: 17px;
									}
									
									a{
										color: #008DBE;
									}
									
									a:hover{
										text-decoration: none;
									}
								}
							}
						}
						
						.ban_chay{
								.float;
								width: (@width_content_right)-21px;
								margin: 0 0 10px 20px;
								
								ul{
									list-style: none;
								}
							}
					}
				}// end content_right
			}// end content

			#footer{
				.float;
				width: (@width_in)-8px;
				background-color: @color_menu;
				margin: 15px 0 5px 4px;
				.rounded_corners_size(0 ,0 , 10px, 10px);
				padding-bottom: 10px;
				
				.footer_left{
					.float;
					width: 400px;
					p{
						.float;
						width: 400px;;
						color: #ffffff;
						font-size: 14px;
						margin: 5px 0 0 20px;
					}
					
					h2{
						.float;
						margin: 5px 0 0 20px;
						color: #ffffff;
					}
				}
				
				.footer_right{
					.float;
					width: 510px;
					text-align: center;
					
					ul{
						list-style: none;
						margin-top: 20px;
						
						li{
							display: inline;
							font-size: 14px;
							
							span{
								display: inline;
								font-size: 14px;
								color: #ffffff;
								margin-top: -1px;
								font-weight: bold;
							}
							
							a{
								color: #ffffff;
								padding: 10px 15px;
								text-decoration: none;
							}
							
							a:hover{
								text-decoration: underline;
							}
						}
					}
				}
			}
		}// end main_in		
	}// end main
}// end all

